<template>
  <div class="my_prize">
    <u-popup
      v-model="showMyPrize"
      mode="bottom"
      height="80%"
      @close="close"
      :closeable="true"
      close-icon-color="#fff"
      close-icon-size="28"
    >
      <view class="main">
        <view class="top_box">
          <view class="top_img"
            ><img
              :src="
                $IMG_URL +
                '/uploads/20230523/bb4b0f15c532d7ba575f2897e85a3426.png'
              "
              alt=""
              mode="widthFix"
          /></view>
        </view>
        <scroll-view class="content-list" scroll-y>
          <view class="list_box">
            <view
              class="prize_box"
              :class="
                item.type == 'day'
                  ? 'data_prize_box'
                  : item.type == 'week'
                  ? 'week_prize_box'
                  : 'month_prize_box'
              "
              v-for="(item, index) in prize_box"
              :key="index"
            >
              <view class="top_line">
                <view class="number">第{{ item.ranking }}名</view>
                <view class="time"
                  >{{ type[item.type] }}榜 第{{ item.cycle_number }}期第{{
                    item.ranking
                  }}名</view
                >
              </view>
              <view class="title">{{ item.item.name }}</view>
              <view class="explain">活动奖品将发放至您的盒柜</view>
              <view class="rules">活动规则</view>
              <view class="bg_box"></view>
              <view class="img_box">
                <img :src="item.item.image" alt="" />
              </view>
            </view>
            <!-- 缺省页 -->
            <shopro-empty
              v-if="isEmpty"
              :image="
                $IMG_URL +
                '/uploads/20230527/b6a58fe8d40b940c7a7e34827b635710.png'
              "
              tipText="空空荡荡的~"
              marginTop="12%"
            ></shopro-empty>
          </view>
        </scroll-view>
      </view>
    </u-popup>
  </div>
</template>
<script>
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    show: {
      type: [Boolean],
      default: false,
    },
  },
  data() {
    return {
      showMyPrize: false,
      prize_box: [],
      isEmpty: false,
      type: {
        day: '日',
        week: '周',
        month: '月',
      },
    };
  },
  // 计算属性 适配者模式
  computed: {},
  // 数据监听
  watch: {
    show(val) {
      this.showMyPrize = val;
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   */
  //监听页面初始化，其参数同 onLoad 参数 触发时机早于 onLoad 百度小程序
  //onInit() {},
  /** 监听页面加载
   * 其参数为上个页面传递的数据，
   * 参数类型为 Object（用于页面传参）
   */
  onLoad() {},
  // 监听页面显示。页面每次出现在屏幕上都触发 包括从下级页面点返回露出当前页面
  onShow() {},
  // 监听页面初次渲染完成 注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听页面隐藏
  onHide() {},
  // 监听页面卸载
  onUnload() {},
  mounted() {
    this.getMy_award();
  },
  methods: {
    //关闭弹出层
    close() {
      this.$emit('noShow', false);
    },
    //我的奖品列表
    getMy_award() {
      this.$http('v1.getMy_award', {}, '请稍等').then((res) => {
        if (res.code === 1) {
          this.prize_box = res.data;
        }
      });
    },
  },
  /** ---------- */
  // 监听窗口尺寸变化 App、微信小程序、快手小程序
  //onResize() {},
  // 监听用户下拉动作，一般用于下拉刷新
  //onPullDownRefresh() {},
  // 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
  //onReachBottom() {},
  //点击 tab 时触发，参数为Object 微信小程序、QQ小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
  //onTabItemTap() {},
  //用户点击右上角分享 微信小程序、QQ小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
  //onShareAppMessage() {},
  //监听页面滚动 nvue暂不支持
  //onPageScroll() {},
  //监听原生标题栏按钮点击事件 App、H5
  //onNavigationBarButtonTap() {},
  /** 监听页面返回
   * 返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键
   * navigateBack表示来源是 uni.navigateBack ；
   * 支付宝小程序只有真机能触发，只能监听非navigateBack引起的返回，不可阻止默认行为。
   * app、H5、支付宝小程序
   */
  //onBackPress() {},
  // 监听原生标题栏搜索输入框输入内容变化事件 App、H5
  //onNavigationBarSearchInputChanged() {},
  // 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。App、H5
  //onNavigationBarSearchInputConfirmed() {},
  // 监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）App、H5
  //onNavigationBarSearchInputClicked() {},
  // 监听用户点击右上角转发到朋友圈 微信小程序
  //onShareTimeline() {},
  // 监听用户点击右上角收藏 微信小程序、QQ小程序
  //onAddToFavorites() {},
};
</script>
<style lang="scss" scoped>
.my_prize {
  // /deep/ .u-drawer {
  //   background: none;
  //   top: 10rpx !important;
  //   .u-drawer-bottom {
  //     background-color: rgba(0, 0, 0, 0.6) !important;
  //   }
  // }

  .main {
    height: 100%;
    display: flex;
    flex-direction: column;
    .top_box {
      position: relative;
      margin-top: 260rpx;
      width: 100%;
      height: 100rpx;
      background: #d7c9ff;
      box-shadow: inset 0rpx -3rpx 6rpx 0rpx rgba(0, 0, 0, 0.3),
        inset 0rpx 3rpx 6rpx 0rpx rgba(255, 255, 255, 0.5);
      border-radius: 40rpx 40rpx 0rpx 0rpx;
      .top_img {
        width: 507rpx;
        position: absolute;
        bottom: 26rpx;
        left: 121rpx;
        img {
          width: 100%;
        }
      }
    }
    .list_box {
      flex: 1;
      background-color: #fff;
      // overflow: auto;
      padding: 22rpx 30rpx;
      .prize_box {
        width: 690rpx;
        height: 220rpx;

        border-radius: 20rpx 20rpx 20rpx 20rpx;
        opacity: 1;
        position: relative;
        overflow: hidden;
        margin-bottom: 20rpx;
        .top_line {
          width: 336rpx;
          height: 45rpx;

          border-radius: 30rpx 0rpx 30rpx 0rpx;
          display: flex;
          .number {
            width: 110rpx;
            height: 45rpx;

            border-radius: 0rpx 0rpx 30rpx 0rpx;
            font-size: 26rpx;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: 400;
            color: #ffffff;
            line-height: 45rpx;
            text-align: center;
          }
          .time {
            height: 45rpx;
            font-size: 22rpx;
            font-family: PingFang SC-Medium, PingFang SC;
            font-weight: 400;

            line-height: 45rpx;
            margin-left: 19rpx;
          }
        }
        .title {
          font-size: 30rpx;
          font-family: PingFang SC-Heavy, PingFang SC;
          font-weight: 700;

          margin: 24rpx 0 0 59rpx;
        }
        .explain {
          font-size: 22rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;

          margin-left: 59rpx;
          margin-top: 4rpx;
        }
        .rules {
          width: 120rpx;
          height: 40rpx;

          border-radius: 30rpx 30rpx 30rpx 30rpx;
          font-size: 22rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 400;

          line-height: 40rpx;
          text-align: center;
          margin-left: 59rpx;
          margin-top: 4rpx;
        }
        .bg_box {
          position: absolute;
          top: -40rpx;
          right: -62rpx;
          width: 290rpx;
          height: 290rpx;

          border-radius: 50%;
          &::before {
            content: '';
            position: absolute;
            top: -12rpx;
            right: -4rpx;
            width: 290rpx;
            height: 290rpx;

            border-radius: 50% 0 0 50%;
          }
        }
        .img_box {
          width: 159rpx;
          height: 159rpx;
          background: #ffffff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 31rpx;
          right: 25rpx;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
      //根据日榜周榜月榜来切换类名来跟换不同颜色风格
      //日
      .data_prize_box {
        border: 2rpx solid #7f59ed;
        background: #efe9ff;
        .top_line {
          background: #d7c9ff;
          .number {
            background: linear-gradient(90deg, #9578e8 0%, #d69fff 100%);
          }
          .time {
            color: #6f49df;
          }
        }
        .title {
          color: #6f49df;
        }
        .explain {
          color: #6f49df;
        }
        .rules {
          background: #d7c9ff;
          color: #6f49df;
        }
        .bg_box {
          background: #cbb8ff;
          &::before {
            background: linear-gradient(180deg, #cbb8ff 0%, #8668d9 99%);
          }
        }
      }
      //周
      .week_prize_box {
        border: 2rpx solid #ffefeb;
        background: #ffefeb;
        .top_line {
          background: #f6d4b8;
          .number {
            background: linear-gradient(90deg, #f57348 0%, #ffbd76 100%);
          }
          .time {
            color: #f57549;
          }
        }
        .title {
          color: #f57549;
        }
        .explain {
          color: #f57549;
        }
        .rules {
          background: #f6d4b8;
          color: #f57549;
        }
        .bg_box {
          background: #f7dbc2;
          &::before {
            background: linear-gradient(180deg, #ffc68c 0%, #ffa06e 100%);
          }
        }
      }
      //月
      .month_prize_box {
        border: 2rpx solid #de656c;
        background: #ffefeb;
        .top_line {
          background: #ffd7d0;
          .number {
            background: linear-gradient(90deg, #fe4856 0%, #ff9e76 100%);
          }
          .time {
            color: #bc262e;
          }
        }
        .title {
          color: #bc262e;
        }
        .explain {
          color: #bc262e;
        }
        .rules {
          background: #ffd7d0;
          color: #bc262e;
        }
        .bg_box {
          background: #ffb7ac;
          &::before {
            background: linear-gradient(180deg, #ff937c 0%, #f85f61 100%);
          }
        }
      }
    }
  }
}
.content-list {
  width: 100%;
  height: calc(100% - 360rpx);
  background-color: #fff;
}
</style>
